<template>
  <div class="nav-list">
    <div class="nav-list-top">
      <h2 class="nav-list-title">{{currentTitle}}</h2>
      <!-- 动态当定active样式 -->
      <span @click="toggle" :class="{active: isShow}">⌃</span>
    </div>
    <ul v-show="isShow">
      <li v-for="nav in navs" :key="nav" @click="handleClick(nav)">{{nav}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      // 当前展示的标题 默认为数组项的第一项
      currentTitle: this.navs[0]
    }
  },
  props: {
    navs: {
      type: Array,
      // 数组的默认值必须通过一个函数，返回一个数组实现
      default: function () {
        return [];
      },
    },
  },
  methods: {
    toggle() {
      // 切换ul的显示和隐藏
      this.isShow = !this.isShow
    },
    handleClick(nav) {
      // 设置当前展示的标题
      this.currentTitle = nav
      this.isShow = false
    }
  },
};
</script>

<style>
.nav-list,
.nav-list-top {
  width: 100px;
  height: 30px;
  position: relative;
}
.nav-list-top {
  background-color: #3f7df5;
  display: flex;
  align-items: center;
}
.nav-list-title {
  width: 80px;
  font-size: 18px;
  text-align: center;
}
.nav-list-top span {
  flex: 1;
  line-height: 22.5px;
  transition: all .3s;
  text-align: center;
}
.nav-list .active {
  transform: rotate(180deg);
}
.nav-list ul {
  width: 100px;
  position: absolute;
  top: 30px;
  left: 0;
  padding: 10px;
}
.nav-list ul li {
  line-height: 40px;
  text-align: center;
}
.nav-list ul li:hover {
  background-color: #ebf3fe;
  color: #3f7df5;
}
</style>